<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="OrcasThemes">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/screen.css">
    <link rel="stylesheet" href="css/animation.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link href="css/lity.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <!-- SINGLE VIDEO -->
        <div id="single-video" class="container-fluid standard-bg">
            <!-- HEADER -->
            <div class="row header-top">
                <div class="col-lg-3 col-md-6 col-sm-5">
                    <a class="main-logo" href="#"><img src="img/main-logo.png" class="main-logo" alt="Muvee Reviews"
                            title="Muvee Reviews"></a>
                </div>
                <div class="col-lg-6 hidden-md text-center hidden-sm hidden-xs">
                </div>
                <div class="col-lg-3 col-md-6 col-sm-7 hidden-xs">
                    <div class="right-box">
                        <button type="button" class="access-btn" data-toggle="modal"
                            data-target="#enquirypopup">修改信息</button>
                    </div>
                </div>
            </div>
            <!-- MENU -->
            <div class="row home-mega-menu ">
                <div class="col-md-12">
                    <nav class="navbar navbar-default">
                        <div class="navbar-header">
                            <button class="navbar-toggle" type="button" data-toggle="collapse"
                                data-target=".js-navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse js-navbar-collapse megabg dropshd ">
                            <ul class="nav navbar-nav">
                                <li><a href="index.html">Home</a></li>
                            </ul>
                            <div class="search-block">
                            </div>
                        </div>
                        <!-- /.nav-collapse -->
                    </nav>
                </div>
            </div>
            <!-- SINGLE VIDEO -->
            <div class="row">
                <!-- SIDEBAR -->
                <div class="col-lg-2 col-md-4 hidden-sm hidden-xs">
                </div>
                <!-- SINGLE VIDEO -->
                <div id="single-video-wrapper" class="col-lg-10 col-md-8">
                    <div class="row">
                        <!-- VIDEO SINGLE POST -->
                        <div class="col-lg-10 col-md-12 col-sm-12">
                            <!-- POST L size -->
                            <article class="post-video">
                                <!-- VIDEO INFO -->
                                <div class="video-info">
                                    <!-- 16:9 aspect ratio -->
                                    <div class="embed-responsive embed-responsive-16by9 video-embed-box">
                                        <iframe v-bind:src="video.video" class="embed-responsive-item"></iframe>
                                    </div>
                                    <h2 class="title main-head-title">{{video.name}}</h2>
                                    <div class="metabox">
                                        <span class="meta-i">
                                            <i class="fa fa-thumbs-up" aria-hidden="true"></i>20.895
                                        </span>
                                        <span class="meta-i">
                                            <i class="fa fa-thumbs-down" aria-hidden="true"></i>3.981
                                        </span>
                                        <span class="meta-i">
                                            <i class="fa fa-user"></i><a href="#" class="author" title="John Doe">John
                                                Doe</a>
                                        </span>
                                        <span class="meta-i">
                                            <i class="fa fa-clock-o"></i>March 16. 2017
                                        </span>
                                        <span class="meta-i">
                                            <i class="fa fa-eye"></i>1,347,912 views
                                        </span>
                                        <div class="ratings">
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star-half-o" aria-hidden="true"></i>
                                            <i class="fa fa-star-o"></i>
                                            <i class="fa fa-star-half"></i>
                                        </div>
                                    </div>
                                    <div class="share-input">
                                        <span class="fa fa-chain sharelinkicon"></span>
                                    </div>
                                </div>
                                <div class="clearfix spacer"></div>
                                <!-- DETAILS -->
                                <div class="video-content">
                                    <h2 class="title main-head-title">视频描述</h2>
                                    <p>{{video.info}}</p>
                                </div>
                                <div class="clearfix spacer"></div>
                            </article>
                        </div>

                        <!-- VIDEO SIDE BANNERS -->
                        <div class="col-lg-2 col-md-4 hidden-sm hidden-xs">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- CHANNELS -->
        <div id="channels-block" class="container-fluid channels-bg">
            <div class="container-fluid ">
                <div class="col-md-12">
                    <!-- CHANNELS -->
                    <section id="channels">
                    </section>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <!-- BOTTOM BANNER -->
        <div id="bottom-banner" class="container text-center">
        </div>
        <!-- FOOTER -->
        <div id="footer" class="container-fluid footer-background">
            <div class="container">
                <footer>
                    <!-- SECTION FOOTER -->
                    <div class="row">
                        <!-- SOCIAL -->
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                            <div class="row auto-clear">
                                <div class="col-md-12">
                                </div>
                                <div class="col-md-12">
                                </div>
                                <div class="col-md-12">
                                </div>
                            </div>
                        </div>
                        <!-- TAGS -->
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        </div>
                        <!-- POST -->
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        </div>
                        <!-- LINKS -->
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        </div>
                    </div>
                    <div class="row copyright-bottom text-center">
                        <div class="col-md-12 text-center">
                            <a href="" class="footer-logo" title="Video Magazine Bootstrap HTML5 template">
                                <img src="img/footer-logo.png" class="img-responsive text-center"
                                    alt="Video Magazine Bootstrap HTML5 template">
                            </a>
                            <p>Copyright &copy; 2022.Author by Zhao.</p>

                        </div>
                    </div>
                </footer>
            </div>
        </div>
        <!-- MODAL -->
        <div id="enquirypopup" class="modal fade in " role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content row">
                    <div class="modal-header custom-modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>修改信息
                        </h2>
                    </div>
                    <div class="modal-body">
                        <form name="info_form" class="form-inline" action="#" method="post">
                            <div class="form-group col-sm-12">
                                <input type="text" class="form-control" name="name" id="name" v-model="video.name">
                            </div>
                            <div class="form-group col-sm-12">
                                <input type="text" class="form-control" name="" id="email" v-model="video.info">
                            </div>
                            <div class="form-group col-sm-12">
                                <button class="subscribe-btn pull-right" type="submit" title="Subscribe"
                                    v-on:click.prevent="update_video()">提交</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JAVA SCRIPT -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.12.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/lity.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        $(".nav .dropdown").hover(function () {
            $(this).find(".dropdown-toggle").dropdown("toggle");
        }); 
    </script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                video: {}
            },
            methods: {
                get_param: function (name) {
                    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|# |;| $)').exec(location.href) || [, ""])[1].replace(/\+/g, ' % 20')) || null
                },

                get_video: function () {
                    var id = this.get_param("id");
                    $.ajax({
                        type: "get",
                        url: "/video/" + id,
                        context: this,
                        success: function (result, status, xhr) {
                            this.video = result;
                        }
                    })
                },
                update_video: function () {
                    $.ajax({
                        type: "put",
                        url: "/video/" + this.video.id,
                        data: JSON.stringify(this.video),
                        context: this,
                        success: function (result, status, xhr) {
                            window.location.reload();
                        }
                    })
                }
            }
        });
        app.get_video(); 
    </script>
</body>

</html>
